<template>
    <div class="flex-wrapper">
        <div class="img-container">
            <el-carousel height="350px" v-if="partDetail.imageUrl">
                <el-carousel-item v-for="item in partDetail.imageUrl.split(',')" :key="item">
                    <img :src="item" :alt="item" width="100%" height="100%">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="content-container">
            <table>
                <tr style="background-color: cornflowerblue !important;">
                    <th colspan="3">产品信息／Product Information</th>
                </tr>
                <tr>
                    <td>产品品牌</td>
                    <td>Product Brand</td>
                    <td>{{partDetail.brand}}</td>
                </tr>
                <tr>
                    <td>产品描述（名称）</td>
                    <td>Product Description</td>
                    <td>{{partDetail.designation}}</td>
                </tr>
                <tr>
                    <td>产品编号</td>
                    <td>part No</td>
                    <td>{{partDetail.partsNumber}}</td>
                </tr>
                <tr>
                    <td>产品设备型号</td>
                    <td>Unit Model</td>
                    <td>{{partDetail.unitModel}}</td>
                </tr>
                <tr>
                    <td>产品设备系统</td>
                    <td>System</td>
                    <td>{{partDetail.systemName}}</td>
                </tr>
                <tr>
                    <td>产品适用设备</td>
                    <td>Unit</td>
                    <td>{{partDetail.hostNumber}}</td>
                </tr>
                <tr>
                    <td>产品价格</td>
                    <td>Price</td>
                    <td>{{partDetail.salePrice}}</td>
                </tr>
            </table>
            <table>
                <tr style="background-color: cornflowerblue;">
                    <th colspan="3">产品规格</th>
                </tr>
                <tr>
                    <td>产品规格尺寸含包装</td>
                    <td>Size packaging</td>
                    <td>{{partDetail.size}}</td>
                </tr>
                <tr>
                    <td>产品重量</td>
                    <td>Product Weight</td>
                    <td>{{partDetail.weight}}</td>
                </tr>
                <tr>
                    <td>产品使用说明</td>
                    <td>instruction</td>
                    <td>{{partDetail.instruction}}</td>
                </tr>

            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "part-detail",
        props:{
            partDetail:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        created(){
        }
    }
</script>

<style scoped lang="scss">
    .flex-wrapper {
        display: flex;
        .img-container {
            flex: 0 0 300px;
        }
        .content-container {
            padding: 0 20px;
            flex: 1;
            table {
                width: 100%;
                tr {
                    &:nth-child(2n) {
                        background: #ddd;
                    }
                }
                thead {
                    background: cornflowerblue;
                    color: white;
                }
                td {
                    width: 33%;
                }
            }
        }
    }
</style>